<template>
    <el-dialog :title="editQuotItemTitle" :visible.sync="$store.state.quot.showQuotItemDialog"
               center width="700px">

        <el-form :model="quotItem" :rules="rules" :label-position="$store.labelPosition"
                 label-width="30%" ref="quotItem">
            <el-row>
                <el-col  :span="12">
                    <el-form-item label="产品名称：" prop="name">
                        <el-input v-model="quotItem.name" :disabled="isViewItem"></el-input>
                    </el-form-item>
                </el-col>
                <el-col  :span="12">
                    <el-form-item label="材质：" prop="material">
                        <el-input v-model="quotItem.material" :disabled="isViewItem"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>

            <el-row>
                <el-col  :span="12">
                    <el-form-item label="加工方式：" >
                        <el-input v-model="quotItem.method" :disabled="isViewItem"></el-input>
                    </el-form-item>
                </el-col>
                <el-col  :span="12">
                    <el-form-item label="表面处理：" >
                        <el-input v-model="quotItem.surface" :disabled="isViewItem"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>

            <el-row>
                <el-col :span="12">
                    <el-form-item label="数量：" prop="num">
                        <el-input-number v-model="quotItem.num" controls-position="right"
                                         :precision="0" style="width: 68%"
                                         :disabled="isViewItem">

                        </el-input-number>
                        <el-select v-model="quotItem.unit" style="width: 30%" :disabled="isViewItem">
                            <el-option v-for="cd in units" :key="cd.code"
                                       :label="cd.description" :value="cd.code"></el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col  :span="12">
                    <el-form-item label="单价：" prop="price">
                        <el-input-number v-model="quotItem.price" :precision="2"
                                         controls-position="right" :step="0.1" style="width: 100%"
                                         :disabled="isViewItem">
                        </el-input-number>
                    </el-form-item>
                </el-col>
            </el-row>

            <el-row>
                <el-col>
                    <el-form-item label="备注：" label-width="15%">
                        <el-input type="textarea" :row="3" v-model="quotItem.remark"
                                  :disabled="isViewItem"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>

        </el-form>

        <div slot="footer" class="dialog-footer">
            <el-button @click="hideEditDialog()">取 消</el-button>
            <el-button type="primary" @click="saveQuotItem()" v-if="!isViewItem">确 定</el-button>
        </div>

    </el-dialog>

</template>

<script>
import { mapState } from 'vuex'

export default {
    name: "QuotItemEdit",
    data() {
        return {
            rules:{
                name:[{ required: true, message: '请输入产品名称', trigger: 'blur' }],
                material:[{ required: true, message: '请输入材质', trigger: 'blur' }],
                num:[{ required: true, message: '请输入数量', trigger: 'blur' }],
                price:[{ required: true, message: '请输入单价', trigger: 'blur' }]
            }
        }
    },

    computed: {
        ...mapState({
            units: state => state.quot.initPageData.units,
            quotItem: state => state.quot.quotItem,
            isViewItem: state => state.quot.isViewItem
        }),

        editQuotItemTitle(){
            return this.quotItem.id > -1 ? "编辑产品" : "增加产品";
        }
    },

    methods: {
        saveQuotItem(){
            this.$refs['quotItem'].validate((valid) => {
                console.log("表单验证：", valid);
                if (valid) {
                    if(this.quotItem.id  == -1 ){
                        this.addQuotItem();
                    }else{
                        this.editQuotItem();
                    }
                    this.hideEditDialog();

                } else {
                    console.log('保存产品验证不通过');
                    return false;
                }
            });
        },

        async addQuotItem(){
            await this.$axios.post('/sell/quot/quotItem/add', this.quotItem);
            this.$store.dispatch("quot/findQuotItemsByQuotId");
            //this.$myMsg.success('成功创建产品信息。');
        },

        async editQuotItem(){
            await this.$axios.post('/sell/quot/quotItem/edit', this.quotItem);
            this.$store.dispatch("quot/findQuotItemsByQuotId");
            //this.$myMsg.success('成功编辑产品信息。');
        },

        hideEditDialog(){ // 关闭弹出窗口
            this.$store.commit("quot/Hide_Quot_Item_Dialog");
        }
    }
}
</script>

